import React, { useCallback, useContext } from 'react'
import Buoy from '@/components/common/Buoy'
import { appShareLink, getSessionUserId } from '@/utils/bridge'
import { gioReport } from '@/utils/index'
import { ShareUrl, BrowserEnv, ENV } from '@/config/constant'
import { Context as IndexContext } from '@/context/index'

import './share-buoy.scss'

export default function ShareBuoy() {
  const actInfo = useContext(IndexContext)

  const handleShare = useCallback(async () => {
    const shareUserId = await getSessionUserId()
    const { activityStage } = actInfo
    const shareUrl = `${ShareUrl[BrowserEnv.INNER][ENV]}?params=shareUserId-${shareUserId}`
    const shareOutsideUrl = `${
      ShareUrl[BrowserEnv.OUTSIDE][ENV]
    }?params=shareUserId-${shareUserId}*activityStage-${activityStage}`
    appShareLink({ shareUrl, shareOutsideUrl })
    //分享埋點
    gioReport('$WebClick', {
      url: window.location.href,
      $title: '美区万圣节活动页',
      $element_name: '分享',
      page_type: 'activity',
    })
  }, [actInfo])
  return (
    <div className="share-buoy-wrap" onClick={handleShare}>
      <Buoy text="Share" className="share-buoy" icon="share"></Buoy>
    </div>
  )
}
